<template>
	<view>
		<view class="baby-body">
			<view class="item">
			     <text class="name">{{$t(`时间`)}}</text>
				 <TimePick  @change="changeLog" type="date">
					<input style="width: 320rpx;" class="input" placeholder-class="pla" disabled="true" type="digit" v-model="CurrentTime" :placeholder="$t(`请选择时间`)"/>
				 </TimePick>
			</view>
			<view class="item">
                 <text class="name">{{$t(`身高`)}}</text>
				 <input class="input" placeholder-class="pla" type="digit" v-model="height" :placeholder="$t(`请输入身高`)"/>
				 <text class="name">{{$t(`cm`)}}</text>
			</view>
			<view class="item">
			     <text class="name">{{$t(`体重`)}}</text>
				 <input class="input" placeholder-class="pla" type="digit" v-model="weight" :placeholder="$t(`请输入体重`)"/>
				 <text class="name">{{$t(`kg`)}}</text>
			</view>
			<view class="item">
			     <text class="name">{{$t(`头围`)}}</text>
				 <input class="input" placeholder-class="pla" type="digit" v-model="head" :placeholder="$t(`请输入头围`)"/>
				 <text class="name">{{$t(`cm`)}}</text>
			</view>
		</view>
		<view class="Instructions">
			{{$t(`您主动填写的身高、体重、头围信息仅用于记录、绘
			制生长曲线，敏宝空间将持续保障您的个人信息安全。`)}}
		</view>
		<view class="verify" @click="RecordAdd()">
			{{$t(`确定添加`)}}
		</view>
	</view>
</template>

<script>
	import TimePick from './uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue'
	import { RecordModify } from '@/api/baby.js';
	export default {
		components:{
			TimePick
		},
		data() {
			return {
				CurrentTime:'',
				height:'',//身高
				weight:'',//体重
				head:'',//头围
				RecoedId:'',
				requestStatus:false,
			}
		},
		onLoad:function(options){
			this.RecoedId = options.id
		},
		methods: {
			/*  添加生长记录 */
			RecordAdd:function(){
				let that = this;
				if (!that.CurrentTime) return that.$util.Tips({
					title: that.$t(`请选择时间`)
				});
				if (!that.head && !that.height && !that.weight) return that.$util.Tips({
					title: that.$t(`请完善信息`)
				});
				// 模拟按钮点击后会执行 api 请求，耗时 1 秒
				// 请求完成前 按钮点击将不会继续执行此函数
				if (that.requestStatus) {
					// 利用 return 终止函数继续运行
					return false;
				}
				RecordModify({
					child_baby_id:that.RecoedId,
					height:that.height? that.height : 0,
					weight:that.weight? that.weight : 0,
					head:that.head? that.head : 0,
					record_time:that.timeStamp(that.CurrentTime)
				}).then(res => {
					that.$util.Tips(
						{
							title: that.$t(`添加成功`)
						},
						{
							tab: 3
						}
					);
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
				})
				// 执行函数
				that.requestStatus = true;
				setTimeout(() => {
					// 模拟执行完毕
					// 改变 requestStatus
					that.requestStatus = false;
				}, 2000);
				
			},
			changeLog(e) {
				this.CurrentTime = e;
			},
			/**
			 * 时间格式转换为时间戳
			 * 
			 */
			timeStamp:function(time){
				var date = new Date(time); // 将字符串转换为Date对象  
				var timestamp = date.getTime(); // 获取时间戳  
				return timestamp/1000
			},
		}
	}
</script>

<style lang="scss">
.uni-calendar-item__weeks-box{
	.uni-calendar-item--checked{
		background-color: #FF8FB9 !important;
	}
} 	
.uni-datetime-picker--btn{
	background: #FF8FB9 !important;
}		
.verify{
	margin:  52rpx auto 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FF8FB9;
	color: #FFFFFF;
	width: 556rpx;
	height: 88rpx;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
}	
.Instructions{
	font-size: 28rpx;
	font-family: PingFang SC, PingFang SC;
	padding: 0 48rpx;
	color: #808080;
}	
.baby-body{
	margin: 16rpx 0 32rpx 0;
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	.item{
		border-top: 1rpx solid #ececec;
		display: flex;
		align-items: center;
		padding: 32rpx;
		.name{
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #1A1A1A;
		}
		.pla{
			color: #808080;
		}
		.input{
			margin: 0 72rpx;
			width: 220rpx;
			font-size: 32rpx;
			color: #1A1A1A;
		}
	}
}
</style>
